<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HEAD>
 <TITLE>知恵袋　q14114723819　Dialog(jquery-ui-1.10.3.custom.min.js)</TITLE>
        <META http-equiv="X-UA-Compatible"     content="IE=8">
        <META http-equiv="Content-Type"        content="text/html; charset=UTF-8">
        <META http-equiv="Content-Script-Type" content="text/javascript">
        <BASE href="http://kiyoto777.web.fc2.com">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://kiyoto777.web.fc2.com/jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<link href="http://kiyoto777.web.fc2.com/jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
 var button_len = $('button').length;    // ボタンの数
 var j;                                  // j=i+1
 for (i=0; i < button_len; i++){         // ボタンの数を繰り返す
   j = i+1;                              // ex i=0→j=i+1→1
   $('#dialog_' + j).dialog({            // Dialog Set
    autoOpen: false,
    modal: false,
    width: "auto",
    height: "auto"
   });
   $('#opener_' + j).click(function () { // ボタンをクリック時
    $('#'+$(this).val()).dialog('open'); // ボタンに設定されている valueのＩＤをオープンする
   });
 }
});
</script>

<style type="text/css">
body{background-color:#000000;color:#ffffff;font-size:32px;}
</style>
</head>
<body>
<button id="opener_1" value="dialog_1">Enlarge1</button>
<div id="dialog_1" title="Dialog Title1">Enlarge1
<img class="large_1" src="./test/gaz1.gif" />
</div>

<button id="opener_2" value="dialog_2">Enlarge2</button>
<div id="dialog_2" title="Dialog Title2">Enlarge2
<img class="large_2" src="./test/gaz2.gif" />
</div>

<button id="opener_3" value="dialog_3">Enlarge3</button>
<div id="dialog_3" title="Dialog Title3">Enlarge3
<img class="large_3" src="./test/gaz3.gif" />
</div>





</BODY>
</HTML>

